<template>
  <!-- 模板内容不变，与原代码一致 -->
  <view class="message-list-container">
    <!-- 标题栏 -->
    <view class="message-header">
      <text class="header-title">找人列表</text>
      <text class="header-count">{{ state.count }} 条找人</text>
    </view>

    <scroll-view
      class="function-scroll"
      scroll-y
      @scrolltolower="buttonScrolltolower"
      style="height: calc(100vh - 47vh)"
    >
      <view class="message-list">
        <view
          class="message-item"
          v-for="(item, index) in dataList"
          :key="index"
          :class="{ 'last-item': index == dataList.length - 1 }"
          @click="dataListClick(item)"
        >
          <view class="user-info">
            <view
              class="avatar"
              :style="{ backgroundColor: stringToColor(item.title) }"
            >
              <text class="avatar-text">聘</text>
            </view>

            <view class="user-detail">
              <view
                class="username"
                style="font-size: 30rpx; font-weight: bolder"
              >
                {{ item.title || "--" }}
              </view>
              <view class="username">
                {{ item.company_name || "--" }}
                <text v-if="state.type == 2 && item.company_name">
                  ({{ item.username || "--" }})
                </text>
              </view>
              <text
                class="username"
                :class="item.status == 1 ? 'status-active' : 'status-inactive'"
                >{{ item.status == 1 ? "正在找人" : "停止找人" }}</text
              >
              <text
                class="username"
                style="margin-left: 8px"
                v-if="item.audit_status != 2"
                :class="
                  item.audit_status == 3 ? 'status-error' : 'status-active'
                "
                >{{ item.audit_status_name }}</text
              >
            </view>
          </view>

          <view class="message-content">
            <view class="tags-list">
              <view
                class="tag-item"
                v-for="(tag, index) in item.sys_label_name?.split('，') || []"
                :key="index"
              >
                {{ tag ? tag : "--" }}
              </view>
            </view>
            <view class="time">{{
              item.created_at ? item.created_at : "--"
            }}</view>
          </view>
        </view>

        <!-- 空状态 -->
        <u-empty
          mode="data"
          :text="`暂无找人`"
          v-if="dataList.length == 0"
          marginTop="50%"
          :icon="getResource('img/phone/mini/no_data.png')"
        />
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from "vue";
import { getZhaoPin } from "@/api/news.js";
import { getResource } from "@/utils/Resource";
import {
  showToast,
  showLoading,
  hideLoading,
  showModalNoCancel,
  showModal,
} from "@/utils/toast";
const state = reactive({
  count: 0,
  form: {
    page_no: 1,
    page_size: 10,
    page_count: 1,
    type: "other",
  },
  dataList: [],
});
const { dataList, form } = toRefs(state);
onMounted(async () => {
  await init();
});
const init = async () => {
  try {
    const res = await getZhaoPin(form.value);
    state.count = res.data.count;
    dataList.value = [...dataList.value, ...res.data.list];
  } catch (error) {}
};
const dataListClick = (e) => {
  uni.navigateTo({
    url: `/pages/user/component/recruit/recruitItem?id=${e.id}&type=1`,
  });
};

const stringToColor = (str) => {
  if (str == "" || str == null) {
    return;
  }
  let hash = 0;
  for (let i = 0; i < str.length; i++) {
    hash = str.charCodeAt(i) + ((hash << 5) - hash);
  }
  const c = (hash & 0x00ffffff).toString(16).toUpperCase();
  return `#${"00000".substring(0, 6 - c.length)}${c}`;
};

const buttonScrolltolower = async () => {
  if (state.count != dataList.value.length) {
    form.value.page_no++;
    showLoading("加载中");
    await init();
  } else {
    showToast("已经最后一页了~");
  }
};
</script>

<style lang="scss" scoped>
.message-list-container {
  background-color: #f5f7fa;
  padding-bottom: 120rpx;

  .message-header {
    padding: 30rpx 20rpx;
    background-color: #fff;
    border-bottom: 1px solid #eee;

    .header-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }

    .header-count {
      margin-left: 15rpx;
      font-size: 26rpx;
      color: #999;
    }
  }
  .message-list {
    padding: 20rpx;

    .message-item {
      background-color: white;
      border-radius: 16rpx;
      padding: 25rpx;
      margin-bottom: 20rpx;
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

      &.last-item {
        margin-bottom: 0;
      }
      .user-info {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;

        .avatar {
          width: 70rpx;
          height: 70rpx;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 20rpx;

          .avatar-text {
            color: white;
            font-size: 32rpx;
            font-weight: bold;
          }
        }

        .user-detail {
          .username {
            padding: 6rpx 16rpx;
            border-radius: 16rpx;
            font-size: 22rpx;
            font-weight: 400;

            &.status-active {
              background-color: rgba(74, 144, 226, 0.1);
              color: #4a90e2;
            }
            &.status-error {
              background-color: rgb(255 5 5);
              color: white;
            }
            &.status-inactive {
              background-color: rgba(153, 153, 153, 0.1);
              color: #999;
            }
          }
        }
      }
    }
    .message-content {
      .tags-list {
        display: flex;
        flex-wrap: wrap;
        gap: 12rpx; // 标签间距
        flex: 1;
        .tag-item {
          padding: 8rpx 20rpx;
          background-color: #f0f5ff;
          color: #4a90e2;
          border-radius: 16rpx;
          font-size: 22rpx;
        }
      }
      .time {
        margin-top: 10px;
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}
</style>
